<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户管理</title>
  <link rel="stylesheet" href="./../bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./../font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="./../css/index.css">
  <link rel="stylesheet" href="./../css/header.css">
  <link rel="stylesheet" href="./../css/menu.css">

</head>

<body>
  <div class="container-fluid box-height">
    <div class="row header-h  border-light d-flex align-content-center shadow-lg bg-header">
      <div class="col-sm-2 col-lg-2 text-light">
        <i class="fa fa-user text-success size-24"></i>
        <span id="usernickname" class="mx-2">wqw</span>，欢迎您。
      </div>
      <div class="col-sm-7 col-lg-7 text-center">
        <span class="text-success font-weight-bold size-20">成都市龙泉驿区北泉路社区社区医院家庭医生签约服务平台</span>
      </div>
      <div class="col-sm-3 col-lg-3 text-right">
        <a type="button" class="btn btn-link text-light" href="./user_info.html">
          <i class="fa fa-user-circle-o text-primary"></i>
          <span>账户设置</span>
        </a>
        <button type="button" class="btn btn-link text-light" id="exitSystem">
          <i class="fa fa-sign-out text-warning"></i>
          <span>退出系统</span>
        </button>
      </div>
    </div>
    <div class="row menu-height">
      <div class="col-lg-2 px-0">
        <ul class="menu box-height bg-menu">
          <li>
            <div class="px-4 bg-menu">
              <a href="./main.html" class="btn-link">
                <i class="fa fa-tachometer pr-2"></i>
                <span>工作台</span></a>
            </div>
          </li>
          <li>
            <div class="px-4">
              <span>
                <i class="fa fa-cogs pr-2"></i>
                <span>权限管理</span>
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div class="text-center">
              <a href="./accesslist.html" class="btn-link">权限管理</a>
            </div>
            <div class="text-center">
              <a href="./rolelist.html" class="btn-link">角色管理</a>
            </div>
            <div class="text-center">
              <a href="./userlist.html" class="btn-link">用户管理</a>
            </div>
          </li>
          <li>
            <div class="px-4">
              <span>
                <i class="fa fa-object-group pr-2"></i>
                <span>医生团队管理</span>
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div class="text-center">
              <a href="./doctor_team_management.html" class="btn-link">家庭医生团队管理</a>
            </div>
            <div class="text-center">
              <a href="./doctors_management.html" class="btn-link">家庭医生管理</a>
            </div>
            <div class="text-center">
              <a href="./doctors_job.html" class="btn-link">医生职称管理</a>
            </div>
          </li>

          <li>
            <div class="px-4">
              <span>
                <i class="fa fa-table pr-2"></i>
                <span>签约管理</span>
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div class="text-center">
              <a href="./serivce_pack.html" class="btn-link">健康服务包管理</a>
            </div>
            <div class="text-center">
              <a href="./person_types.html" class="btn-link">居民类别管理</a>
            </div>
            <div class="text-center">
              <a href="./contract_management.html" class="btn-link">签约居民列表</a>
            </div>
          </li>
          <li>
            <div class="px-4">
              <span>
                <i class="fa fa-database pr-2"></i>
                <span>统计分析</span>
              </span>
              <i class="fa fa-angle-down"></i>
            </div>
            <div class="text-center">
              <a href="./statistic_table.html" class="btn-link">统计表</a>
            </div>
            <div class="text-center">
              <a href="./statistic_charts.html" class="btn-link">统计图</a>
            </div>
          </li>
        </ul>
      </div>
      <div class="col-lg-10 bg-white">
        <!-- 面包屑导航 -->
        <div class="row">
          <div class="col px-0">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="" class="text-success">权限管理</a></li>
                <li class="breadcrumb-item active" aria-current="page">用户管理</li>
              </ol>
            </nav>
          </div>
        </div>
        <!-- title -->
        <div class="row">
          <div class="col">
            <h5 class="border-bottom  pb-2  pl-2  title-border">用户列表</h5>
          </div>
        </div>
        <!-- 搜索栏 -->
        <div class="row bg-light  py-3 justify-content-between">
          <div class="col">
            <form class="form-inline">
              <button type="button" class="btn btn-success mr-2 addUser"><i
                  class="fa fa-plus-circle text-warning"></i><span>
                  添加用户</span></button>
              <input type="search" class="form-control mr-2" id="search" placeholder="请输入用户名称或账号">
              <button type="button" class="btn btn-primary mr-2" id="searchBtn"><i
                  class="fa fa-search text-warning mr-2"></i><span>查询</span></button>
            </form>
          </div>
          <div class="col text-right">
            <button type="button" class="btn btn-warning refresh-btn"><i class="fa fa-refresh text-light"></i></button>
          </div>
        </div>
        <!-- 表格展示 -->
        <div class="row mt-3 rounded-lg bg-light pt-3">
          <div class="col">
            <table class="table table-bordered">
              <thead class="thead-light">
                <tr>
                  <th width="50">
                    <input type="checkbox">
                  </th>
                  <th scope="col">用户帐号</th>
                  <th scope="col">用户名称</th>

                  <th scope="col">用户状态</th>
                  <th scope="col" width="400">操作</th>
                </tr>
              </thead>
              <tbody id="userTbody">
                <!-- 
                <tr>
                  <th>
                    <input type="checkbox">
                  </th>
                  <td>10000001</td>
                  <td>张三疯</td>
                  <td>
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="customSwitch1">
                      <label class="custom-control-label" for="customSwitch1">启用</label>
                    </div>
                  </td>
                  <td>
                    <button type="button" class="btn btn-link   text-info btn-roles">角色选择</button>
                    <button type="button" class="btn btn-link   text-warning btn-access">权限设置</button>
                    <button type="button" class="btn btn-link   text-danger btn-delete">删除</button>
                    <button type="button" class="btn btn-link   text-primary btn-modify">修改</button>
                  </td>
                </tr>
                <tr>
                  <th>
                    <input type="checkbox">
                  </th>
                  <td>10000002</td>
                  <td>王重阳</td>
                  <td>
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="customSwitch1">
                      <label class="custom-control-label" for="customSwitch1">启用</label>
                    </div>
                  </td>
                  <td>
                    <button type="button" class="btn btn-link text-info">角色选择</button>
                    <button type="button" class="btn btn-link text-warning">权限设置</button>
                    <button type="button" class="btn btn-link text-danger">删除</button>
                    <button type="button" class="btn btn-link  text-primary btn-modify">修改</button>
                  </td>
                </tr>
                <tr>
                  <th>
                    <input type="checkbox">
                  </th>
                  <td>10000003</td>
                  <td>李莫愁</td>
                  <td>
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" id="customSwitch1">
                      <label class="custom-control-label" for="customSwitch1">启用</label>
                    </div>
                  </td>
                  <td>
                    <button type="button" class="btn btn-link text-info">角色选择</button>
                    <button type="button" class="btn btn-link text-warning">权限设置</button>
                    <button type="button" class="btn btn-link text-danger">删除</button>
                    <button type="button" class="btn btn-link  text-primary btn-modify">修改</button>
                  </td>
                </tr> -->
              </tbody>
            </table>
          </div>
        </div>
        <!-- 没有数据时，显示的内容 -->
        <div class="row d-none" id="noData">
          <div class="col text-center text-muted">
            没有查询到数据，请先添加
          </div>
        </div>
        <!-- 分页 -->
        <div class="row mt-3 rounded-lg pt-3 bg-light" id="mypage">
          <div class="col px-0">
            <nav aria-label="Page navigation">
              <ul class="pagination justify-content-end pr-3" id="userPagination">
                <!-- <li class="page-item disabled">
                  <a class="page-link">Previous</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                  <a class="page-link" href="#">Next</a>
                </li> -->
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- modal  用户权限管理 -->
  <div class="modal" tabindex="-1" id="modalAddAccessToUser">
    <div class="modal-dialog  modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">用户权限管理</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form class="form">
            <div class="form-group">
              <label for="accessName2"><span class="text-danger">*</span>用户账号</label>
              <input type="text" class="form-control" id="accessName2" readonly value="">
            </div>
            <div class="form-group">
              <label for="selectRoles">选择权限:</label>
              <input type="text" class="form-control" id="selectRoles">
            </div>
            <div class="text-warning">请选择权限策略：</div>
            <table class="table table-striped">
              <thead>
                <tr>
                  <th> <input type="checkbox"> </th>
                  <th>权限名称</th>
                  <th>权限描述</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><input type="checkbox" value="1"></td>
                  <td>权限管理</td>
                  <td>系统管理员可以操作此模块，添加、修改、删除用户，添加、修改、删除权限，添加、修改、删除角色。</td>
                </tr>
                <tr>
                  <td><input type="checkbox" value="2"></td>
                  <td>医生团队管理</td>
                  <td>医生团队的添加、修改、删除，可以添加、删除医生进团队，</td>
                </tr>
                <tr>
                  <td><input type="checkbox" value="3"></td>
                  <td>医生管理</td>
                  <td>添加、修改、删除 医生信息</td>
                </tr>
                <tr>
                  <td><input type="checkbox" value="3"></td>
                  <td>签约管理</td>
                  <td>添加、修改、删除 居民信息，管理</td>
                </tr>
                <tr>
                  <td><input type="checkbox" value="3"></td>
                  <td>统计分析</td>
                  <td>查看团队的签约统计数据</td>
                </tr>
              </tbody>
            </table>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-success" id="addAccessToUserBtn">提交</button>
        </div>
      </div>
    </div>
  </div>
  <!-- modal  角色选择-->
  <div class="modal" tabindex="-1" id="modalUserSelectRole">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">选择角色</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="alert alert-warning" role="alert">
            <i class="fa fa-exclamation-triangle text-warning"></i>
            用户加入到角色后，将拥有该角色的所有权限！
          </div>
          <form class="form">
            <div class="form-group">
              <label for="username1"><span class="text-danger">*</span>用户账号</label>
              <input type="text" class="form-control" id="userName1" readonly value="">
            </div>
            <div class="form-group">
              <label for="selectRoles2">选择角色:</label>
              <input type="text" class="form-control" id="selectRoles2" readonly>
            </div>
            <div class="text-warning">请选择角色：</div>
            <table class="table table-striped">
              <thead>
                <tr>
                  <th> <input type="checkbox" id="checkAllAccess"> </th>
                  <th>角色名称</th>
                  <th>角色描述</th>
                </tr>
              </thead>
              <tbody id="rolesTable">
                <tr>
                  <td><input type="checkbox" value="1"></td>
                  <td>管理员</td>
                  <td>系统管理员可以操作所有模块。</td>
                </tr>
                <tr>
                  <td><input type="checkbox" value="2"></td>
                  <td>医生</td>
                  <td>医生只可以操作和医生业务相关的模块。</td>
                </tr>
                <tr>
                  <td><input type="checkbox" value="3"></td>
                  <td>护士</td>
                  <td>护士只可以操作和护士业务相关的模块。</td>
                </tr>
              </tbody>
            </table>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-success" id="setUserRoleBtn">提交</button>
        </div>
      </div>
    </div>
  </div>
  <!-- modal  添加用户-->
  <div class="modal" tabindex="-1" id="modalAddUser">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">创建新用户</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="userInfoForm" enctype="multipart/form-data">
            <div class="form-group row">
              <label for="uacessno" class="col-sm-3 col-form-label">账号名称</label>
              <div class="col-sm-5">
                <input type="text" class="form-control" id="uacessno" name="uacessno" aria-describedby="usernameHelp">
              </div>
              <div class="col-sm-4">
                <small id="usernameHelp" class="form-text text-muted mt-3">最多20个字符</small div>
              </div>
            </div>
            <div class="form-group row">
              <label for="nickname" class="col-sm-3 col-form-label">姓名</label>
              <div class="col-sm-5">
                <input type="text" class="form-control" id="nickname" name="uname" aria-describedby="nicknameHelp">
              </div>
              <div class="col-sm-4">
                <small id="nicknameHelp" class="form-text text-muted mt-3">最多20个字符</small div>
              </div>
            </div>

            <div class="form-group row">
              <label for="password" class="col-sm-3 col-form-label">密码</label>
              <div class="col-sm-5">
                <input type="password" class="form-control" id="password" name="upwd" aria-describedby="nicknameHelp">
              </div>
              <div class="col-sm-4">
                <small id="passwordHelp" class="form-text text-muted mt-3">任意6位字符</small>
              </div>
            </div>

            <div class="form-group  row">
              <label class="form-check-label col-sm-3 col-form-label">性别</label>
              <div class="col-sm-9">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="sex1" name="usex" value="男" class="custom-control-input">
                  <label class="custom-control-label" for="sex1">男</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="sex2" name="usex" value="女" class="custom-control-input">
                  <label class="custom-control-label" for="sex2">女</label>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label for="tel" class="col-sm-3 col-form-label">手机号码</label>
              <div class="col-sm-5">
                <input type="text" name="utel" class="form-control" id="tel" maxlength="11" aria-describedby="telHelp">
              </div>
              <div class="col-sm-4">
                <small id="telHelp" class="form-text text-muted mt-3">任意11位数字</small>
              </div>
            </div>
            <div class="form-group row">
              <label for="sid" class="col-sm-3 col-form-label">身份证</label>
              <div class="col-sm-5">
                <input type="text" name="usid" class="form-control" id="sid" maxlength="18" aria-describedby="sidHelp">
              </div>
              <div class="col-sm-4">
                <small id="sidHelp" class="form-text text-muted mt-3">任意18位的身份证</small>
              </div>
            </div>
            <div class="form-group row">
              <label for="sid" class="col-sm-3 col-form-label">头像</label>
              <div class="col-sm-5">
                <input type="file" name="uphoto" class="custom-file-input" id="customFile">
                <label class="custom-file-label mx-3" for="customFile">Choose file</label>
              </div>
              <div class="col-sm-4">
                <small id="sidHelp" class="form-text text-muted mt-3">选择图片，修改头像</small>
              </div>
            </div>
            <div class="row">
              <div class="col-9 offset-3">
                <img class="user-head-photo" src="./../images/userdefault.jpeg" alt="">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-success" id="addUserBtn">创建</button>
        </div>
      </div>
    </div>
  </div>
  <!-- modal  修改用户-->
  <div class="modal" tabindex="-1" id="modalModifyUser">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">修改用户信息</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form name="userInfoForm2">
            <div class="form-group row">
              <label for="uacessno2" class="col-sm-3 col-form-label">账号名称</label>
              <div class="col-sm-5">
                <input type="text" class="form-control" id="uacessno2" name="uacessno2" aria-describedby="usernameHelp2"
                  readonly>
              </div>
              <div class="col-sm-4">
                <small id="usernameHelp2" class="form-text text-muted mt-3">最多20个字符</small div>
              </div>
            </div>
            <div class="form-group row">
              <label for="nickname2" class="col-sm-3 col-form-label">姓名</label>
              <div class="col-sm-5">
                <input type="text" class="form-control" id="nickname2" name="uname" aria-describedby="nicknameHelp2">
              </div>
              <div class="col-sm-4">
                <small id="nicknameHelp2" class="form-text text-muted mt-3">最多20个字符</small div>
              </div>
            </div>

            <div class="form-group row">
              <label for="password2" class="col-sm-3 col-form-label">修改密码</label>
              <div class="col-sm-5">
                <input type="password" class="form-control" id="password2" name="upwd" aria-describedby="passwordHelp2">
              </div>
              <div class="col-sm-4">
                <small id="passwordHelp2" class="form-text text-muted mt-3">任意6位字符</small>
              </div>
            </div>

            <div class="form-group  row">
              <label class="form-check-label col-sm-3 col-form-label">性别</label>
              <div class="col-sm-9">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="sex3" name="usex" value="男" class="custom-control-input modify-sex">
                  <label class="custom-control-label" for="sex3">男</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" id="sex4" name="usex" value="女" class="custom-control-input modify-sex">
                  <label class="custom-control-label" for="sex4">女</label>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label for="tel2" class="col-sm-3 col-form-label">手机号码</label>
              <div class="col-sm-5">
                <input type="text" name="utel" class="form-control" id="tel2" maxlength="11"
                  aria-describedby="telHelp2">
              </div>
              <div class="col-sm-4">
                <small id="telHelp2" class="form-text text-muted mt-3">任意11位数字</small>
              </div>
            </div>
            <div class="form-group row">
              <label for="sid2" class="col-sm-3 col-form-label">身份证</label>
              <div class="col-sm-5">
                <input type="text" name="usid" class="form-control" id="sid2" maxlength="18"
                  aria-describedby="sidHelp2">
              </div>
              <div class="col-sm-4">
                <small id="sidHelp2" class="form-text text-muted mt-3">任意18位的身份证</small>
              </div>
            </div>
            <div class="form-group row">
              <label for="sid" class="col-sm-3 col-form-label">头像</label>
              <div class="col-sm-5">
                <input type="file" name="uphoto" class="custom-file-input" id="customFile2">
                <label class="custom-file-label mx-3" for="customFile2">Choose file</label>
              </div>
              <div class="col-sm-4">
                <small id="sidHelp2" class="form-text text-muted mt-3">选择图片，修改头像</small>
              </div>
            </div>
            <div class="row">
              <div class="col-9 offset-3">
                <img class="user-head-photo" id="userModifyPhoto" src="./../images/userdefault.jpeg" alt="">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-success" id="modifyUserBtn">修改</button>
        </div>
      </div>
    </div>
  </div>

  <script src="./../jquery/jquery-3.6.0.js"></script>
  <script src="./../bootstrap4/dist/js/bootstrap.bundle.js"></script>
  <script src="./../js/comm.js"></script>
  <script src="./../js/userlist.js"></script>

</body>

</html>